import { useState, useEffect } from "react";
import "./GradeList.css";

export default function GradeList(props) {
    const [items, setItems] = useState(null);

    useEffect(() => {

        (async () => {
            let response = await fetch("/api/grade/list");
            if (!response.ok) {
                console.error(response);
                return;
            }

            setItems(await response.json());

            console.log("grade list loaded");
        })();

    }, []);

    return (
        <div>
            <table>
                <thead>
                    <tr>
                        <th>姓名</th>
                        <th>课程</th>
                        <th>成绩</th>
                    </tr>
                </thead>
                <tbody>
                    {items &&
                        items.map((item) => (
                            <tr key={`${item.stu_sn}-${item.cou_sn}`}>
                                <td>{item.stu_name}</td>
                                <td>{item.cou_name}</td>
                                <td>{item.grade}</td>
                            </tr>
                        ))}
                </tbody>
            </table>
        </div>
    );
}
